<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 防止浏览器不兼容问题 */
       body{
            margin:0;
            padding:0;
            }
            
        @media screen{
        p {font-family:verdana,sans-serif; font-size:14px}
        }

        @media print{
        p {font-family:times,serif; font-size:10px}
        }

        @media screen,print{
        p {font-weight:bold}
        }

        .div1{
            height:60px;
            background-color: black;
        }    
        .div2{
            /* 对齐方法： */

            /* margin-left: auto;
            margin-right: auto; */

            /* 绝对定位元素会被从正常流中删除，并且能够交叠元素。 */
            /* position:absolute; */
            
            /* 会生成块级框，非替换元素要设置宽度，否则会尽可能的窄 */
            /* float:right; */

            /* 设置宽度 */
            /* height:50px; */
            /* height:auto; */
            /* height: 50%; */
            /* 用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效. */
            /* max-height: 50%; */
            /* 适用于所有元素 */
            /* line-height: 90%; */
            /* width:40%; */

            /* display: inline; */
            /* background-color: blue; */
        }
        
        /* ul是大的容器，li是小的容器，a是内容 */
        ul{
            float: left;
            width: 100%;
            padding:40px;
            list-style-type:none;
        }
        a{
            /* 把链接设为块元素可使整个块元素可点 */
            /* display:block;
            width:60px; */
            float: left;
            width:40px;
            text-decoration: none;
            list-style-type: none;
            color: white;
            background-color: blueviolet;
            border-right:white 1px solid;
        }
        
        a:hover{
            background-color: coral;
        }
        li{
            display: inline;
        }

        
        .container{
            width:100%;
            margin:0px;
            border:1px solid gray;
            line-height:150%;
        }
        div.header,div.footer{
            padding:0.5em;
            color:white;
            background-color:gray;
            clear:left;
            }
        h1.header{
            padding:0;
            margin:0;
            }
        div.left{
            float:left;
            width:160px;
            margin:0;
            padding:1em;
            }
        div.content{
            margin-left:190px;
            border-left:1px solid gray;
            padding:1em;
            }

            
        h2.pos_left{
            position:relative;
            left:-20px
            }
        h2.pos_right{
            position:relative;
            left:20px;
            /* 不可见但会占据空间 */
            visibility:hidden;
            }

        tr.coll{
            /* 在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。占据的空间会留给其他元素使用 */
            /* 用给其他元素会呈现成hidden */
            visibility:collapse;
            }

        /* div.img{
            margin:3px;
            border:1px solid #bebebe;
            height:auto;
            width:auto;
            float:left;
            text-align:center;
            }
            div.img img{
            display:inline;
            margin:3px;
            border:1px solid #bebebe;
            }
            div.img a:hover img{
            border:1px solid #333333;
            }
            div.desc{
            text-align:center;
            font-weight:normal;
            width:150px;
            font-size:12px;
            margin:10px 5px 10px 5px;
            /* IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度,IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x) */
            /* opacity:0.6;
            }  */

        /* 只有 Internet Explorer 支持 behavior 属性，避免 */
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">这是一个div</div>
    </div>

    <ul>
        <li><a>姓名</a></li>
        <li><a>性别</a></li>
        <li><a>爱好</a></li>
    </ul>

    <div class="container">

        <div class="header"><h1 class="header">W3School.com.cn</h1></div>
        
        <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
        
        <div class="content">
        <h2>Free Web Building Tutorials</h2>
        <p>At W3School.com.cn you will find all the Web-building tutorials you need,
        from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
        <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
        
        <div class="footer">Copyright 2008 by YingKe Investment.</div>
    </div>

    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

    <table border="1">
        <tr>
            <td>Adams</td>
            <td>John</td>
        </tr>
        <tr class="coll">
            <td>Bush</td>
            <td>George</td>
        </tr>
    </table>

    <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
    <span style="cursor:auto">
    Auto</span><br />
    <span style="cursor:crosshair">
    Crosshair</span><br />
    <span style="cursor:default">
    Default</span><br />
    <span style="cursor:pointer">
    Pointer</span><br />
    <span style="cursor:move">
    Move</span><br />
    <span style="cursor:e-resize">
    e-resize</span><br />
    <span style="cursor:ne-resize">
    ne-resize</span><br />
    <span style="cursor:nw-resize">
    nw-resize</span><br />
    <span style="cursor:n-resize">
    n-resize</span><br />
    <span style="cursor:se-resize">
    se-resize</span><br />
    <span style="cursor:sw-resize">
    sw-resize</span><br />
    <span style="cursor:s-resize">
    s-resize</span><br />
    <span style="cursor:w-resize">
    w-resize</span><br />
    <span style="cursor:text">
    text</span><br />
    <span style="cursor:wait">
    wait</span><br />
    <span style="cursor:help">
        help</span>

    <!-- <div class="img">
        <a target="_blank" href="/i/tulip_ballade.jpg">
        <img src="../css_properties/img/pic.jpg" alt="pic" width="160" height="160">
        </a>
        <div class="desc">在此处添加对图像的描述</div>
      </div>
      
      <div class="img">
        <a target="_blank" href="/i/tulip_flaming_club.jpg">
        <img src="../css_properties/img/pic.jpg" alt="pic" width="160" height="160">
        </a>
        <div class="desc">在此处添加对图像的描述</div>
      </div>
      
      <div class="img">
        <a target="_blank" href="/i/tulip_fringed_family.jpg">
        <img src="../css_properties/img/pic.jpg" alt="pic" width="160" height="160">
        </a>
        <div class="desc">在此处添加对图像的描述</div>
      </div>
      
      <div class="img">
        <a target="_blank" href="/i/tulip_peach_blossom.jpg">
        <img src="../css_properties/img/pic.jpg" alt="pic" width="160" height="160">
        </a>
        <div class="desc">在此处添加对图像的描述</div>
      </div> -->

</body>
</html>